<!--
     新增用户
-->
<template>
  <el-dialog v-model="dialogVisible" :title="title" :width="width" :before-close="handleClose">
    <slot name="content">
      <el-form ref="formRef" :model="ruleForm" label-width="auto" class="demo-dynamic">
        <el-form-item label="身份证号" prop="pass">
          <el-input v-model="ruleForm.name" type="text" />
        </el-form-item>
        <el-form-item label="姓名" prop="pass">
          <el-input v-model="ruleForm.name" type="text" />
        </el-form-item>
        <el-form-item label="手机号" prop="pass">
          <el-input v-model="ruleForm.name" type="text" />
        </el-form-item>
        <el-form-item label="出生年月" prop="pass">
          <el-input v-model="ruleForm.name" type="text" />
        </el-form-item>
        <el-form-item label="居住地址" prop="pass">
          <el-input v-model="ruleForm.name" type="text" />
        </el-form-item>
        <el-form-item label="医师" prop="pass">
          <el-input v-model="ruleForm.name" type="text" />
        </el-form-item>
      </el-form>
    </slot>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" @click="submitForm(formRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, toRefs, reactive } from 'vue'
import type { FormInstance } from 'element-plus'

const Pose = defineProps({
  title: {
    type: String,
    default: '系统提示'
  },
  width: {
    type: String,
    default: '500'
  }
})
// const state = reactive({
//   title: Pose.title,
//   width: Pose.width
// })
// const { title, width } = toRefs(state)

const dialogVisible = ref(false)
const emits = defineEmits(['confirm'])

//关闭
const onClear = () => {
  hide()
}

//清除
const show = () => {
  dialogVisible.value = true
}

//清除
const hide = () => {
  dialogVisible.value = false
}
//点击
const handleClose = () => {
  hide()
}

const formRef = ref<FormInstance>()
const ruleForm = reactive<{
  name: string
  phone: string
  icCode: string
}>({
  name: '',
  phone: '',
  icCode: ''
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      emits('confirm', formRef.value)
      hide()
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

defineExpose({
  show,
  hide
})
</script>
